<template>
    <div class="feixing_container" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <SetHeader ref="headRef" :tableHead="tableHead" @getTableHead="getTableHead" />
        <BrandList ref="brandRef" />
        <AddModel ref="addRef" @getModelList="getModelList" />
        <EditModel ref="editRef" @getEditData="getEditData" />
        <Crawling ref="Crawling" />
        <div class="com_box pd_20">
            <div class="flexbox flexcenter flexbetween time_head">
                <div class="flexbox flexcenter">
                    <el-popover placement="bottom-start" width="380" v-model="is_model">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{modelCheck.name?modelCheck.name:'请选择模板'}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <div class="tm_title font_16 color_01">模板</div>
                            <el-input placeholder="请输入名称搜索" size="small" prefix-icon="el-icon-search" class="mt_12" v-model="userQuery" clearable>
                            </el-input>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="selectModel(item)" :class="{'active':item.id==modelCheck.id}" v-for="(item,index) in filteredData(userQuery,modelList,'id','name')" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter" v-if="item.id != 0">
                                        <span class="icon_btn" @click.stop="editModel(item)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                        <span class="icon_btn" @click.stop="deletModel(item,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                            <div class="model_btn">
                                <el-button plain size="small" style="width:100%" @click="addModel">
                                    <div class="flexbox flexcenter flexjust">
                                        <svg class="fill_svg btn_svg" width="16" height="16" viewBox="0 0 16 16" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M14 4.8L2 4.8V2.53336C2 2.24003 2.24 2.00003 2.53333 2.00003L13.4667 2.00003C13.76 2.00003 14 2.24003 14 2.53336V4.8ZM5.2 14H2.53333C2.24 14 2 13.76 2 13.4667V5.86666H5.2V14ZM13.4667 14H5.86665V5.86666L14 5.86666V13.4667C14 13.76 13.76 14 13.4667 14Z" fill="inherit" />
                                        </svg>
                                        添加模板
                                    </div>
                                </el-button>
                            </div>
                            <div class="model_btn">
                                <el-button plain size="small" style="width:100%" @click="openBrand">
                                    <div class="flexbox flexcenter flexjust">
                                        <svg class="btn_svg fill_svg stroke_svg" width="16" height="16" viewBox="0 0 16 16" stroke="#95A5C9" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M3.2001 12L1.6001 5.1L4.8001 6.6L8.0001 2.4L11.2001 6.6L14.4001 5.1L12.8001 12H3.2001Z" fill="inherit" stroke="inherit" stroke-width="2" stroke-linejoin="round" />
                                            <path d="M7.99995 9.6C8.44177 9.6 8.79995 9.24182 8.79995 8.8C8.79995 8.35818 8.44177 8 7.99995 8C7.55813 8 7.19995 8.35818 7.19995 8.8C7.19995 9.24182 7.55813 9.6 7.99995 9.6Z" fill="white" stroke="white" stroke-width="2" stroke-linejoin="round" />
                                        </svg>
                                        品牌管理
                                    </div>
                                </el-button>
                            </div>
                        </div>
                    </el-popover>
                    <el-popover placement="bottom-start" width="225" @show="hasBrand" trigger="hover" style="margin-left:10px">
                        <div slot="reference" class="flexbox flexcenter">
                            <i class="el-icon-question has_quetion"></i>
                            <span class="font_14 color_02">已选品牌</span>
                        </div>
                        <ul class="hasSelectList">
                            <li v-for="(item,index) in hasBrandList" :key="index">
                                <div class="has_name">{{item.brand_name}}</div>
                                <div class="flexbox flexcenter has_status">
                                    <template v-if="item.status==0">
                                        数据等待更新...
                                    </template>
                                    <template v-else-if="item.status==1">
                                        <i class="el-icon-loading"></i>
                                        数据更新中
                                    </template>
                                    <template v-else>
                                        最后更新时间：{{item.update_time}}
                                    </template>
                                </div>
                            </li>
                        </ul>
                    </el-popover>
                    <div class="brand_tips">(已启用的品牌数据更新需要到[品牌管理]中手动更新)</div>
                </div>
                <div class="flexbox flexcenter">
                    <div class="flexbox flexcenter flexcolumn" style="margin-right:20px;cursor:pointer" @click="openCrawling">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                            <path d="M5.8905 5.37597C5.95305 4.87554 6.37844 4.5 6.88279 4.5H17.1172C17.6215 4.5 18.0469 4.87554 18.1095 5.37597L19.8595 19.3759C19.9341 19.9728 19.4687 20.5 18.8672 20.5H5.13277C4.53128 20.5 4.06589 19.9728 4.1405 19.3759L5.8905 5.37597Z" fill="#F79C69" stroke="#F79C69" stroke-width="1.5" stroke-linejoin="round"/>
                            <path d="M7.5 9.5C7.5 9.5 8.5 11.5 12 11.5C15.5 11.5 16.5 9.5 16.5 9.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p class="font_12" style="color:#5C636C">商品爬取</p>
                    </div>
                <el-date-picker style="width:280px" @change="selectScreen" value-format="yyyy-MM-dd" v-model="subForm.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                </div>
            </div>
            <div class="time_title head_title">筛选</div>
            <div class="flexbox">
                <div class="fx_left">达人信息</div>
                <div class="flexbox flexcenter fx_right flex">
                    <div class="fx_box flexbox flexcenter">
                        <div class="fx_text">达人标签</div>
                        <div class="fx_line"></div>
                        <el-select v-model="subForm.tags_relation" ref="tagRef" placeholder="全部" @change="selectTag" size="mini" filterable multiple collapse-tags :style="{width:selectWidth+'px'}" style="margin-left:10px">
                            <el-option v-for="item in tagList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <!-- <el-cascader style="width:80px" ref="tagRef" id="el-cascader" @change="selectTag" v-model="tagValue" :options="options" :props="{multiple: true,emitPath:true}" collapse-tags size="mini" placeholder="全部"></el-cascader> -->
                    </div>
                    <div class="fx_box flexbox flexcenter">
                        <div class="fx_text">粉丝量级</div>
                        <div class="fx_line"></div>
                        <el-input v-model="queryInfo.fx_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.fx_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                    </div>
                    <div class="fx_box flexbox flexcenter">
                        <div class="fx_text">20-60s 价格</div>
                        <div class="fx_line"></div>
                        <el-input v-model="queryInfo.jg_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.jg_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                    </div>
                    <div class="fx_box flexbox flexcenter">
                        <div class="fx_text">60s+ 价格</div>
                        <div class="fx_line"></div>
                        <el-input v-model="queryInfo.jg2_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.jg2_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">w</span>
                    </div>
                </div>
            </div>
            <div class="flexbox">
                <div class="fx_left">受众画像</div>
                <div class="flexbox flexcenter fx_right flex">
                    <div class="fx_box flexbox flexcenter">
                        <el-select v-model="queryInfo.age" placeholder="年龄画像" @change="changeScreen" size="mini" style="width:90px">
                            <el-option v-for="item in ageList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="fx_line noMl"></div>
                        <el-input v-model="queryInfo.age_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.age_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                    </div>
                    <div class="fx_box flexbox flexcenter">
                        <el-select v-model="queryInfo.job" placeholder="八大画像" @change="changeScreen" size="mini" style="width:90px">
                            <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="fx_line noMl"></div>
                        <el-input v-model="queryInfo.job_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.job_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                    </div>
                    <div class="fx_box flexbox flexcenter">
                        <el-select v-model="queryInfo.sex" placeholder="粉丝性别" @change="changeScreen" size="mini" style="width:90px">
                            <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="fx_line noMl"></div>
                        <el-input v-model="queryInfo.sex_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                        <span class="fx_unit">~</span>
                        <el-input v-model="queryInfo.sex_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                        <span class="fx_unit">%</span>
                    </div>
                </div>
            </div>
            <div class="flexbox">
                <div class="fx_left">视频类型</div>
                <div class="flexbox flexcenter fx_right flex">
                    <el-radio-group v-model="subForm.p_type" size="small" style="margin-top:12px">
                        <el-radio-button :label="0">全部</el-radio-button>
                        <el-radio-button :label="1">种草</el-radio-button>
                        <el-radio-button :label="2">带货</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="flexbox" v-if="hasScreen.length>0">
                <div class="fx_left">已选</div>
                <div class="fx_check flex flexbox">
                    <div class="check_item flexbox flexcenter" v-for="item in hasScreen" :key="item">
                        {{item.text}}
                        <el-link icon="el-icon-close" :underline="false" class="fx_close" @click="delectScreen(item)"></el-link>
                    </div>
                </div>
            </div>
            <div class="fx_btn">
                <el-button plain size="small" class="el-button-width" @click="resetScreen">重置</el-button>
                <el-button type="primary" size="small" class="el-button-width" @click="selectScreen" @keyup.enter.native="selectScreen()">筛选</el-button>
            </div>
        </div>
        <div class="com_box pd_20" style="margin-top:12px;padding-bottom:0">
            <div class="flexbox flexcenter flexbetween">
                <div class="time_title">达人列表</div>
                <div class="flexbox flexcenter">
                    <el-input placeholder="达人名称" size="small" clearable suffix-icon="el-icon-search" @change="selectScreen" v-model="subForm.blogger_name" style="width:216px;margin-left:12px">
                    </el-input>
                    <el-button plain size="small" style="margin-left:12px" @click="setHeader">
                        <div class="flexbox flexcenter flexjust">
                            <svg class="fill_svg stroke_svg btn_svg" width="16" height="16" viewBox="0 0 16 16" fill="#95A5C9" stroke="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.8058 5.3513C12.1809 5.88929 12.4449 6.51056 12.5644 7.18181H14V8.81819H12.5644C12.4449 9.48944 12.1809 10.1107 11.8058 10.6487L12.8212 11.6641L11.6641 12.8212L10.6487 11.8058C10.1107 12.1809 9.48944 12.4449 8.81819 12.5644V14H7.18181V12.5644C6.51056 12.4449 5.88929 12.1809 5.3513 11.8058L4.33589 12.8212L3.17882 11.6641L4.1942 10.6487C3.81908 10.1107 3.55512 9.48944 3.4356 8.81819H2V7.18181H3.4356C3.55512 6.51056 3.81908 5.88929 4.1942 5.3513L3.17882 4.33589L4.33589 3.17882L5.3513 4.1942C5.88929 3.81908 6.51056 3.55512 7.18181 3.4356V2H8.81819V3.4356C9.48944 3.55512 10.1107 3.81908 10.6487 4.1942L11.6641 3.17882L12.8212 4.33589L11.8058 5.3513Z" fill="inherit" stroke="inherit" stroke-width="1.66667" stroke-linejoin="round" />
                                <path d="M8 10C9.10456 10 10 9.10456 10 8C10 6.89544 9.10456 6 8 6C6.89544 6 6 6.89544 6 8C6 9.10456 6.89544 10 8 10Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linejoin="round" />
                            </svg>
                            自定义列
                        </div>
                    </el-button>
                    <el-button plain size="small" class="plain_blue" @click="downloadFile(dowloadData)" :disabled="dowloadData.length==0" style="margin-left:12px">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出已选
                        </div>
                    </el-button>
                    <el-button type="primary" size="small" style="margin-left:12px" @click="downloadAll" :disabled="modelCheck.id==0">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='white' class="btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出全部
                        </div>
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" class="com_table fx_table source_table" v-if="total>0" :key="tableKey" ref="mtTable" max-height="700" :row-key="(row)=>{ return row.id}" @sort-change='sortChange' @selection-change="selectTable">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true" fixed="left">
                </el-table-column>
                <el-table-column prop="segmentation_during" label="发布达人" width="250" fixed="left">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <img :src="scope.row.xt_logo" alt="" class="bz_head">
                            <div class="bz_info">
                                <div class="fx_text1">{{scope.row.blogger_name}}</div>
                                <div class="fx_text2">抖音号：{{scope.row.dy_num}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="视频信息" width="340">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <div class="vd_left">
                                <img :src="scope.row.video_logo" alt="" class="vd_head">
                                <div class="vd_type green_bg" v-if="scope.row.p_type==1">种草</div>
                                <div class="vd_type blue_bg" v-else-if="scope.row.p_type==2">带货</div>
                            </div>
                            <div class="bz_info">
                                <div class="fx_text1">{{scope.row.video_title}}</div>
                                <div class="vd_link flexbox flexcenter">
                                    <svg class="copy_btn" @click="copy('https://www.douyin.com/share/video/'+scope.row.video_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                        <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                        <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                    </svg>
                                    <a :href="'https://www.douyin.com/share/video/'+scope.row.video_url" target="_blank" class="link_text">https://www.douyin.com/share/video/{{scope.row.video_url}}</a>
                                </div>
                                <div class="fx_text2">{{scope.row.video_public_time}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <template v-for="item in tableHead">
                    <template v-if="item.prop=='blogger_fans'|| item.prop=='like_count' || item.prop=='play_mid'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                {{scope.row[item.prop] | unitWan}}
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='brand_sales_count_min'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                {{scope.row.brand_sales_count_min}}-{{scope.row.brand_sales_count_max}}
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='brand_total_sales_min'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                {{scope.row.brand_total_sales_min | unitWan}}-{{scope.row.brand_total_sales_max | unitWan}}
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='dy_cate' || item.prop=='tags_relation'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <span class="type_text">{{scope.row[item.prop]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='product_source'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <template v-if="scope.row[item.prop]==1">天猫</template>
                                <template v-else-if="scope.row[item.prop]==2">抖音小店</template>
                                <template v-else>无</template>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='comment'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <el-input type="textarea" @blur="editMsg(scope.row,scope.$index,'is_com')" v-textarea v-if="scope.row.is_com" resize="none" :rows="4" placeholder="" v-model="scope.row.comment">
                                </el-input>
                                <div class="flexbox flexcenter remark_hover" v-else>
                                    <template v-if="scope.row[item.prop]">
                                        {{scope.row[item.prop]}}
                                    </template>
                                    <template v-else>
                                        --
                                    </template>
                                    <span class="icon_btn flexbox flexcenter flexjust" @click="isEdit('is_com',scope.$index)">
                                        <img src="../../assets/img/edit_icon2.svg" alt="">
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='cooperation'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <el-input type="textarea" @blur="editMsg(scope.row,scope.$index,'is_cop')" v-textarea v-if="scope.row.is_cop" resize="none" :rows="4" placeholder="" v-model="scope.row.cooperation">
                                </el-input>
                                <div class="flexbox flexcenter remark_hover" v-else>
                                    <template v-if="scope.row[item.prop]">
                                        {{scope.row[item.prop]}}
                                    </template>
                                    <template v-else>
                                        --
                                    </template>
                                    <span class="icon_btn flexbox flexcenter flexjust" @click="isEdit('is_cop',scope.$index)">
                                        <img src="../../assets/img/edit_icon2.svg" alt="">
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='link'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <a :href="scope.row.xt_main_url" target="_blank" class="link_item flexbox flexjust flexcenter red_link">
                                    <img src="../../assets/img/feixing1.svg" alt="">
                                    星图链接
                                </a>
                                <a :href="scope.row.blogger_detail_url" target="_blank" class="link_item flexbox flexjust flexcenter green_link">
                                    <img src="../../assets/img/feixing2.svg" alt="">
                                    飞瓜链接
                                </a>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='price_20_60' || item.prop=='price_60'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                ￥{{scope.row[item.prop]}}
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='sex_man' || item.prop=='sex_female'|| item.prop=='telephone_iphone'|| item.prop=='play_over_rate'|| item.prop=='interact_rate'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                {{scope.row[item.prop] | keepTwoNum}}%
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='nlzb'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <el-popover width="140" trigger="hover">
                                    <div class="hover_layer">
                                        <div class="hover_title">粉丝年龄占比</div>
                                        <div class="layer_item flexbox flexcenter flexbetween" v-for="item in scope.row.ageArr" :key="item.name">
                                            <span class="layer_text">{{item.name}}</span>
                                            <span class="blue_hover">{{item.value}}%</span>
                                        </div>
                                    </div>
                                    <div class="hover_box" slot="reference">
                                        <div class="hover_list">
                                            <template v-for="(item,index) in scope.row.ageArr">
                                                <div class="hover_item flexbox flexbetween flexcenter" v-if="index<3" :key="item.name">
                                                    <span>{{item.name}}</span>
                                                    <span class="blue_hover">{{item.value}}%</span>
                                                </div>
                                            </template>
                                        </div>
                                        <div class="hover_text">鼠标移入查看全部</div>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='bdrq'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <el-popover width="140" trigger="hover">
                                    <div class="hover_layer">
                                        <div class="hover_title">八大人群画像占比</div>
                                        <template v-for="item in scope.row.jobArr">
                                            <div class="layer_item flexbox flexcenter flexbetween" v-if="item.is_show" :key="item.value">
                                                <span class="layer_text">{{item.name}}</span>
                                                <span class="blue_hover">{{item.value}}%</span>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="hover_box" slot="reference">
                                        <div class="hover_list">
                                            <template v-for="item in scope.row.jobArr">
                                                <template>
                                                    <div class="hover_item flexbox flexbetween flexcenter" v-if="item.is_show" :key="item.value">
                                                        <span class="hover_max">{{item.name}}</span>
                                                        <span class="blue_hover">{{item.value}}%</span>
                                                    </div>
                                                </template>
                                            </template>
                                        </div>
                                        <div class="hover_text">鼠标移入查看全部</div>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.prop=='lxfs'">
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                <div class="flexbox flexcenter">
                                    <svg class="copy_btn" @click="copy(scope.row.wechat)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                        <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                        <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                    </svg>
                                    <img src="../../assets/img/wx_icon.svg" alt="" class="wx_img">
                                    {{scope.row.wechat?scope.row.wechat:'--'}}
                                </div>
                                <div class="fx_adress">
                                    <el-input type="textarea" @blur="editMsg(scope.row,scope.$index,'is_adr')" v-textarea v-if="scope.row.is_adr" resize="none" :rows="2" placeholder="" v-model="scope.row.contact">
                                    </el-input>
                                    <div class="flexbox flexcenter remark_hover" style="height:28px" v-else>
                                        <template v-if="scope.row.contact">
                                            {{scope.row.contact}}
                                        </template>
                                        <template v-else>
                                            --
                                        </template>
                                        <span class="icon_btn flexbox flexcenter flexjust" @click="isEdit('is_adr',scope.$index)">
                                            <img src="../../assets/img/edit_icon2.svg" alt="">
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column v-if="item.is_show==1" :prop="item.prop" :label="item.title" :min-width="item.width" :sortable="item.sortable" :key="item.prop">
                            <template slot-scope="scope">
                                {{scope.row[item.prop]?scope.row[item.prop]:'--'}}
                            </template>
                        </el-table-column>
                    </template>
                </template>
            </el-table>
            <div class="flexbox flexcenter flexcolumn flexjust" style="height:790px" v-else>
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据，请在上方选择相应条件后进行查询</div>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="subForm.page" :page-size="subForm.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import SetHeader from "./SetHeader";
import BrandList from "./BrandList";
import AddModel from "./AddModel";
import EditModel from "./EditModel";
import { ageList, jobList, sexList, headList } from "../../assets/js/feixing";
import downLoad from "../../excel/ExportDown";
import Crawling from './Crawling.vue';
export default {
    name: "",
    data() {
        return {
            loading: false,
            is_model: false,
            tableKey: Math.random(),
            selectWidth: 60,
            modelCheck: {
                id: 0,
                name: "全部",
            },
            hasCheck: [],
            hasBrandList: [],
            modelList: [],
            hasScreen: [],
            tagList: [],
            ageList: [],
            jobList: [],
            sexList: [],
            headList: [],
            tableHead: [],
            dowloadData: [],
            queryInfo: {
                fx_l: "",
                fx_r: "",
                jg_l: "",
                jg_r: "",
                jg2_l: "",
                jg2_r: "",
                age: "",
                age_l: "",
                age_r: "",
                job: "",
                job_l: "",
                job_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            },
            subForm: {
                date: [],
                template_id: 0,
                blogger_name: "",
                tags_relation: [],
                fans_num: [],
                price_20_60: [],
                price_60: [],
                age: {
                    name: "",
                    range: [],
                },
                crowd: {
                    name: "",
                    range: [],
                },
                sex: {
                    name: "",
                    range: [],
                },
                p_type:0,
                field: "",
                order: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
            userQuery: "",
        };
    },
    created() {
        this.ageList = ageList;
        this.jobList = jobList;
        this.sexList = sexList;
        // this.getTimeFn();
        this.getTagList();
        this.getModelList();
        this.getTableHead();
        // this.getDataList();
    },
    beforeDestroy() {},
    methods: {
        openCrawling() {
         this.$refs.Crawling.getData()
        },
        // 筛选
        filteredData(query, list, id, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();
            list = list.filter(function (item) {
                if (item[name]) {
                    if (item[id] == query || item[name].indexOf(query) !== -1) {
                        return item;
                    }
                }
            });
            return list;
        },

        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            that.subForm.date[0] = that.formatDate(start);
            that.subForm.date[1] = that.formatDate(end);
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        selectTag(value) {
            if (value.length > 0) {
                this.selectWidth = 200;
            } else {
                this.selectWidth = 60;
            }
            this.changeScreen();
        },
        changeScreen() {
            let hasChecked = [];
            if (this.subForm.tags_relation.length > 0) {
                let arr = {
                    type: "tag",
                    value: "",
                    text: this.tagName(this.subForm.tags_relation),
                };
                hasChecked.push(arr);
            }
            if (this.queryInfo.fx_l && this.queryInfo.fx_r) {
                let arr = {
                    type: "fans",
                    value: "",
                    text:
                        "粉丝量级：" +
                        this.queryInfo.fx_l +
                        "w~" +
                        this.queryInfo.fx_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.fans_num = [
                    Number(this.queryInfo.fx_l) * 10000,
                    Number(this.queryInfo.fx_r) * 10000,
                ];
            }
            if (this.queryInfo.jg_l && this.queryInfo.jg_r) {
                let arr = {
                    type: "price1",
                    value: "",
                    text:
                        "20-60s价格：" +
                        this.queryInfo.jg_l +
                        "w~" +
                        this.queryInfo.jg_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.price_20_60 = [
                    Number(this.queryInfo.jg_l) * 10000,
                    Number(this.queryInfo.jg_r) * 10000,
                ];
            }
            if (this.queryInfo.jg2_l && this.queryInfo.jg2_r) {
                let arr = {
                    type: "price2",
                    value: "",
                    text:
                        "60s+价格：" +
                        this.queryInfo.jg2_l +
                        "w~" +
                        this.queryInfo.jg2_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.price_60 = [
                    Number(this.queryInfo.jg2_l) * 10000,
                    Number(this.queryInfo.jg2_r) * 10000,
                ];
            }
            if (
                this.queryInfo.age &&
                this.queryInfo.age_l &&
                this.queryInfo.age_r
            ) {
                let arr = {
                    type: "age",
                    value: "",
                    text:
                        "年龄画像：" +
                        "(" +
                        this.getName(this.queryInfo.age, this.ageList) +
                        ") " +
                        this.queryInfo.age_l +
                        "%~" +
                        this.queryInfo.age_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.age.name = this.queryInfo.age;
                this.subForm.age.range = [
                    this.queryInfo.age_l,
                    this.queryInfo.age_r,
                ];
            }
            if (
                this.queryInfo.job &&
                this.queryInfo.job_l &&
                this.queryInfo.job_r
            ) {
                let arr = {
                    type: "job",
                    value: "",
                    text:
                        "八大画像：" +
                        "(" +
                        this.getName(this.queryInfo.job, this.jobList) +
                        ") " +
                        this.queryInfo.job_l +
                        "%~" +
                        this.queryInfo.job_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.crowd.name = this.queryInfo.job;
                this.subForm.crowd.range = [
                    this.queryInfo.job_l,
                    this.queryInfo.job_r,
                ];
            }
            if (
                this.queryInfo.sex &&
                this.queryInfo.sex_l &&
                this.queryInfo.sex_r
            ) {
                let arr = {
                    type: "sex",
                    value: "",
                    text:
                        "粉丝性别：" +
                        "(" +
                        this.getName(this.queryInfo.sex, this.sexList) +
                        ") " +
                        this.queryInfo.sex_l +
                        "%~" +
                        this.queryInfo.sex_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.sex.name = this.queryInfo.sex;
                this.subForm.sex.range = [
                    this.queryInfo.sex_l,
                    this.queryInfo.sex_r,
                ];
            }
            if (this.subForm.p_type!==0) {
                let arr = {
                    type: "p_type",
                    value: "",
                    text: "视频类型："+(this.subForm.p_type==1?'种草':'带货'),
                };
                hasChecked.push(arr);
            }
            this.hasScreen = hasChecked;
        },
        // 筛选标签
        getName(value, list) {
            let text = list
                .filter((val) => val.id == value)
                .map((item) => {
                    return item.name;
                })
                .toString();
            return text;
        },
        // 达人标签
        tagName(tag) {
            let text = [];
            text = tag.join("、");
            return "达人标签：" + text;
        },
        // 删除筛选
        delectScreen(item) {
            if (item.type == "tag") {
                this.subForm.tags_relation = [];
                this.selectWidth = 60;
            } else if (item.type == "fans") {
                this.queryInfo.fx_l = "";
                this.queryInfo.fx_r = "";
                this.subForm.fans_num = [];
            } else if (item.type == "price1") {
                this.queryInfo.jg_l = "";
                this.queryInfo.jg_r = "";
                this.subForm.price_20_60 = [];
            } else if (item.type == "price2") {
                this.queryInfo.jg2_l = "";
                this.queryInfo.jg2_r = "";
                this.subForm.price_60 = [];
            } else if (item.type == "age") {
                this.queryInfo.age = null;
                this.queryInfo.age_l = "";
                this.queryInfo.age_r = "";
                this.subForm.age.name = "";
                this.subForm.age.range = [];
            } else if (item.type == "job") {
                this.queryInfo.job = null;
                this.queryInfo.job_l = "";
                this.queryInfo.job_r = "";
                this.subForm.crowd.name = "";
                this.subForm.crowd.range = [];
            } else if (item.type == "sex") {
                this.queryInfo.sex = null;
                this.queryInfo.sex_l = "";
                this.queryInfo.sex_r = "";
                this.subForm.sex.name = "";
                this.subForm.sex.range = [];
            }
            else if (item.type == "p_type") {
                this.subForm.p_type = 0;
            }
            this.$nextTick(() => {
                this.changeScreen();
            });
        },

        // 筛选
        selectScreen() {
            this.changeScreen();
            this.getDataList(1);
        },

        // 品牌管理
        openBrand() {
            this.$refs.brandRef.dialogVisible = true;
            this.$refs.brandRef.getBrandList();
        },

        // 添加模板
        addModel() {
            this.$refs.addRef.dialogVisible = true;
            this.$refs.addRef.getBrandList();
        },

        // 编辑模板
        editModel(item) {
            this.$refs.editRef.dialogVisible = true;
            this.$refs.editRef.editData(item);
        },
        getEditData(id) {
            if (this.subForm.template_id == id) {
                this.getDataList(this.setpage);
            }
            this.getModelList();
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
                let all = {
                    id: 0,
                    name: "全部",
                };
                this.modelList.unshift(all);
            }
        },

        // 已选品牌
        async hasBrand() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/templateBrandList",
                {
                    id: this.subForm.template_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hasBrandList = res.data;
            }
        },

        //获取标签列表
        async getTagList() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/bloggerTags"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.tagList = res.data;
            }
        },

        // 表头设置
        setHeader() {
            this.$refs.headRef.getParentData(true, this.tableHead);
        },

        // 获取头部
        async getTableHead() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/customTableGet"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if (
                    res.data.custom_field &&
                    res.data.custom_field.hasOwnProperty("fx_head") &&
                    res.data.custom_field.fx_head.length > 0
                ) {
                    this.tableHead = [];
                    this.tableHead = this.assignArr(
                        headList,
                        res.data.custom_field.fx_head
                    );
                } else {
                    this.tableHead = headList;
                }
                this.tableKey = Math.random();
                this.getDataList(this.setpage);
            }
        },

        // 数组去重
        assignArr(arr2, arr1) {
            for (var i = 0; i < arr2.length; i++) {
                var flag = false;
                for (var k = 0; k < arr1.length; k++) {
                    if (arr2[i].prop === arr1[k].prop) {
                        flag = true;
                        break;
                    }
                }
                if (!flag) {
                    arr1.push(arr2[i]);
                }
            }
            return arr1;
        },

        //获取列表
        async getDataList(page) {
            this.subForm.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/bloggerList",
                this.subForm
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                let headArr = this.tableHead.filter(
                    (item) => item.prop == "bdrq"
                )[0].children;
                for (let i in res.data.list) {
                    let ageArr = [];
                    let jobArr = [];
                    ageArr.push({
                        name: "18-23岁",
                        value: (
                            Number(res.data.list[i].age_18_23) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "24-30岁",
                        value: (
                            Number(res.data.list[i].age_24_30) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "31-40岁",
                        value: (
                            Number(res.data.list[i].age_31_40) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "41-50岁",
                        value: (
                            Number(res.data.list[i].age_41_50) * 100
                        ).toFixed(1),
                    });
                    ageArr.push({
                        name: "大于50岁",
                        value: (Number(res.data.list[i].age_50) * 100).toFixed(
                            1
                        ),
                    });

                    jobArr.push({
                        name: "精致妈妈",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_jzmm"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_jzmm) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "小镇青年",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_xzqn"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_xzqn) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "Z时代",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_zsd"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_zsd) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "新锐白领",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_xrbl"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_xrbl) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "都市蓝领",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_dsll"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_dsll) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "资深中产",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_zszc"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_zszc) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "小镇中老年",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_xzzln"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_xzzln) * 100
                        ).toFixed(1),
                    });
                    jobArr.push({
                        name: "都市银发",
                        is_show: headArr.filter(
                            (item) => item.prop == "crowd_dsyf"
                        )[0].is_show,
                        value: (
                            Number(res.data.list[i].crowd_dsyf) * 100
                        ).toFixed(1),
                    });
                    res.data.list[i].ageArr = ageArr.sort(
                        this.sortFun("value")
                    );
                    res.data.list[i].jobArr = jobArr.sort(
                        this.sortFun("value")
                    );
                }

                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        sortFun(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1; //升序排序
            };
        },

        // 切换模板
        selectModel(item) {
            this.is_model = false;
            this.modelCheck = item;
            this.subForm.template_id = item.id;
            this.getDataList(1);
            this.$refs.mtTable.clearSelection();
        },

        // 删除模板
        deletModel(item, index) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "fxdata/fxboard/templateDelete",
                        {
                            id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.modelList.splice(index, 1);
                        if (item.id == this.modelCheck.id) {
                            this.modelCheck = {
                                id: 0,
                                name: "全部",
                            };
                            this.subForm.template_id = 0;
                            this.getDataList(1);
                        }
                    }
                })
                .catch(() => {});
        },

        // 编辑信息
        isEdit(type, index) {
            this.$set(this.tableData[index], type, true);
            this.tableData;
        },

        //获取标签列表
        async editMsg(row, index, type) {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/msgAdd",
                {
                    uid: row.uid,
                    comment: row.comment,
                    cooperation: row.cooperation,
                    contact: row.contact,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.$set(this.tableData[index], type, false);
                this.getDataList(this.setpage);
            }
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 表格排序
        sortChange(column) {
            this.subForm.order = "";
            this.subForm.field = "";
            if (!column.order) {
                this.getDataList(1);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.subForm.order = order;
            this.subForm.field = column.prop;
            this.getDataList(1);
        },

        // 表格选中
        selectTable(rows) {
            let newArr = JSON.parse(JSON.stringify(rows));
            newArr.forEach((item) => {
                item.p_type = item.p_type == 1 ? "种草" : "带货";
                item.product_source =
                    item.product_source == 1 ? "天猫" : "抖音小店";
                item.video_url =
                    "https://www.douyin.com/share/video/" + item.video_url;
                item.brand_sales_count_min =
                    item.brand_sales_count_min +
                    "-" +
                    item.brand_sales_count_max;
                item.brand_total_sales_min =
                    item.brand_total_sales_min +
                    "-" +
                    item.brand_total_sales_max;
            });
            this.dowloadData = newArr;
        },

        // 导出已选数据
        downloadFile(list_data) {
            let newHead = JSON.parse(JSON.stringify(this.tableHead));
            console.log(newHead,list_data)
            for (let i in newHead) {
                if (newHead[i].prop == "link" && newHead[i].is_show == 1) {
                    let children = newHead[i].children;
                    newHead.splice(i, 1, ...children);
                }
            }
            for (let i in newHead) {
                if (newHead[i].prop == "nlzb" && newHead[i].is_show == 1) {
                    let children = newHead[i].children;
                    newHead.splice(i, 1, ...children);
                }
            }
            for (let i in newHead) {
                if (newHead[i].prop == "bdrq" && newHead[i].is_show == 1) {
                    let children = newHead[i].children;
                    newHead.splice(i, 1, ...children);
                }
            }
            for (let i in newHead) {
                if (newHead[i].prop == "lxfs" && newHead[i].is_show == 1) {
                    let children = newHead[i].children;
                    newHead.splice(i, 1, ...children);
                }
            }
            let head = newHead
                .filter((item) => item.is_show == 1 || item.is_show == true)
                .map((item) => {
                    return item.title;
                });
            let list = newHead
                .filter((item) => item.is_show == 1 || item.is_show == true)
                .map((item) => {
                    return item.prop;
                });
            var excelDatas = [
                {
                    tHeader: [
                        "达人",
                        "抖音号",
                        "视频标题",
                        "视频链接",
                        "视频发布时间",
                        "视频类型",
                        ...head,
                    ],
                    filterVal: [
                        "blogger_name",
                        "dy_num",
                        "video_title",
                        "video_url",
                        "video_public_time",
                        "p_type",
                        ...list,
                    ],
                    tableDatas: list_data,
                    sheetName: "飞星数据",
                },
            ];
            downLoad(excelDatas, "飞星数据");
        },

        //全部数据导出
        async downloadAll() {
            this.loading = true;
            let queryData = JSON.parse(JSON.stringify(this.subForm));
            queryData.limit = 0;
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/bloggerList",
                queryData
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                let newArr = res.data.list;
                newArr.forEach((item) => {
                    item.p_type = item.p_type == 1 ? "种草" : "带货";
                    item.product_source =
                        item.product_source == 1 ? "天猫" : "抖音小店";
                    item.video_url =
                        "https://www.douyin.com/share/video/" + item.video_url;
                    item.brand_sales_count_min =
                        item.brand_sales_count_min +
                        "-" +
                        item.brand_sales_count_max;
                    item.brand_total_sales_min =
                        item.brand_total_sales_min +
                        "-" +
                        item.brand_total_sales_max;
                });
                this.downloadFile(newArr);
            }
        },

        // 重置
        resetScreen() {
            this.queryInfo = {
                fx_l: "",
                fx_r: "",
                jg_l: "",
                jg_r: "",
                jg2_l: "",
                jg2_r: "",
                age: "",
                age_l: "",
                age_r: "",
                job: "",
                job_l: "",
                job_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            };
            this.subForm.field = "";
            this.subForm.order = "";
            this.subForm.blogger_name = "";
            this.subForm.tags_relation = [];
            this.subForm.fans_num = [];
            this.subForm.price_20_60 = [];
            this.subForm.price_60 = [];
            this.subForm.age.name = "";
            this.subForm.age.range = [];
            this.subForm.crowd.name = "";
            this.subForm.crowd.range = [];
            this.subForm.sex.name = "";
            this.subForm.sex.range = [];
            this.subForm.p_type = 0;
            this.hasScreen = [];
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.subForm.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        SetHeader,
        BrandList,
        AddModel,
        EditModel,
        Crawling
    },
};
</script>


<style scoped>
.time_head {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}

.head_title {
    margin-top: 25px;
}

.model_btn {
    margin-top: 12px;
}

.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
}
.page_box {
    padding: 0;
}
.com_table {
    margin-top: 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    max-height: 300px;
}

.yusuan_item {
    margin-top: 0;
    margin-bottom: 12px;
}

.filterInput {
    margin: 10px 0;
}

.el-icon-question.has_quetion {
    color: #cfd4dd;
    margin-top: 2px;
    margin-right: 5px;
}
.fx_left {
    width: 100px;
    font-size: 14px;
    color: #17233d;
    line-height: 36px;
    height: 36px;
    margin-top: 12px;
}
.fx_right {
    flex-wrap: wrap;
}
.fx_box {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-right: 12px;
    height: 32px;
    padding: 0px 16px;
    margin-top: 12px;
}
.fx_text {
    font-size: 14px;
    color: #616c85;
}
.fx_line {
    height: 12px;
    border-left: 1px solid #ebebeb;
    margin-left: 8px;
    margin-right: 0;
}
.noMl {
    margin-left: 0;
}
.fx_unit {
    font-size: 14px;
    color: #17233d;
    margin: 0 4px;
}
.fx_check {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding-top: 12px;
    padding-left: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.check_item {
    padding-left: 8px;
    margin-bottom: 12px;
    margin-right: 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    height: 32px;
    font-size: 13px;
    color: #616c85;
}
.fx_close {
    font-size: 13px;
    width: 32px;
}
.fx_btn {
    margin-top: 12px;
    margin-left: 100px;
}
.bz_info {
    margin-left: 12px;
}
.bz_head {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.fx_text1 {
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.fx_text2 {
    font-size: 13px;
    line-height: 18px;
    color: #b4b7bd;
    height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 2px;
}
.vd_link {
    margin-top: 4px;
}
.vd_left {
    width: 48px;
    height: 72px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.vd_head {
    width: 100%;
    height: 100%;
}
.vd_type {
    position: absolute;
    width: 100%;
    height: 16px;
    line-height: 16px;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 12px;
    color: #fff;
}
.vd_type.green_bg {
    background: rgb(0 194 113 / 90%);
}
.vd_type.blue_bg {
    background: rgb(68 117 255 / 90%);
}
.link_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 0;
    flex: auto;
    height: 22px;
    font-size: 14px;
    line-height: 20px;
    color: #4475ff;
    text-decoration: none;
}
.copy_btn {
    cursor: pointer;
    flex-shrink: 0;
}
.type_text {
    font-size: 13px;
    color: #616c85;
    padding: 5px 10px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    display: inline-block;
    line-height: 18px;
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.link_item {
    width: 104px;
    height: 32px;
    font-size: 14px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin: 4px auto;
    text-decoration: none;
}
.red_link {
    color: #fe346e;
}
.green_link {
    color: #5bb647;
}
.link_item img {
    margin-right: 8px;
}
.hover_box {
    width: 132px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding: 6px 8px 8px 8px;
    cursor: pointer;
}
.hover_max {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blue_hover {
    flex-shrink: 0;
    color: #4475ff;
}
.hover_list {
    height: 72px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ebebeb;
    height: 72px;
    overflow: hidden;
}
.hover_item {
    font-size: 14px;
    color: #616c85;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
}
.hover_text {
    font-size: 13px;
    color: #b4b7bd;
    margin-top: 4px;
    line-height: 18px;
}
.wx_img {
    width: 20px;
    margin: 0 5px;
}
.fx_adress {
    margin-top: 8px;
}
.layer_item {
    height: 28px;
}
.hover_title {
    font-size: 14px;
    line-height: 20px;
    color: #616c85;
    margin-bottom: 10px;
}
.layer_text {
    padding-left: 12px;
    font-size: 14px;
    color: #17233d;
    position: relative;
}
.layer_text::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #17233d;
    left: 0;
    top: 50%;
    margin-top: -3px;
}
.hasSelectList li {
    padding: 6px;
}
.hasSelectList .has_name {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.has_status {
    font-size: 12px;
    color: #b4b7bd;
    height: 16px;
    margin-top: 4px;
}
.brand_tips {
    font-size: 12px;
    margin-left: 5px;
    color: #ff0000;
}
</style>

<style>
.fx_box .el-input__inner {
    border: 0;
    padding-left: 8px;
    font-size: 14px;
}
.fx_box .el-select .el-input__inner::-webkit-input-placeholder,
.fx_box .el-cascader .el-input__inner::-webkit-input-placeholder {
    color: #616c85;
}
.fx_box .el-select .el-input__inner {
    padding-left: 0;
}
.fx_box .el-cascader__tags .el-tag {
    max-width: 120px;
}
.com_table.fx_table.el-table td {
    padding: 8px 0;
}
.feixing_container .el-input .el-input__clear,
.feixing_container .el-date-editor .el-range__close-icon {
    color: #ff0000 !important;
}
</style>


